<template>
    <div class="menu-box">
        <h2>{{menu.name}}</h2>
        <div class="btns">
            <button @click="$emit('add')">+ 添加用料</button>
            &nbsp;&nbsp;
            <button @click="$emit('del')">x 删除这个清单</button>
        </div>
        <ul>
            <li v-for="d in notDoneList" :key="d.name" @click="$emit('toggle',d.name)">
                <div></div>
                <p>{{d.name}}</p>
                <p>{{d.info}}</p>
            </li>
        </ul>
        <template v-if="doneList.length">
            <h4>已完成</h4>
            <ul>
                <li v-for="d in doneList" :key="d.name" @click="$emit('toggle',d.name)">
                    <div></div>
                    <p>{{d.name}}</p>
                    <p>{{d.info}}</p>
                </li>
            </ul>
        </template>
    </div>
</template>

<script>
    export default {
        props:{
            menu:{
                type:Object,
                default(){
                    return {
                        name:"",
                        items:[]
                    }
                }
            }
        },
        computed:{
            doneList(){
                return this.menu.items.filter(i=>i.done)
            },
            notDoneList(){
                return this.menu.items.filter(i=>!i.done)
            }
        }
    }
</script>

<style lang="sass" scoped>
.menu-box
    padding: 20px
    text-align: left
    li
        display: flex
        justify-content: space-between
        margin: 5px 0
        background: #f0f0f0
        padding: 0 10px
</style>